import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'

<Meta title='Design Systems' />

# Colors: Alert

<Preview>
  <Story name="Colors: Alert">
  {{
      components: {},
      template: `
      <div class="row">
        <div class="col span-2">
          <div class="swatch-dot bg-primary"></div>
          <h3>Primary brand</h3>
          <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot bg-success"></div>
          <h3>Normal/Success</h3>
          <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot bg-warning"></div>
          <h3>Bad/Warning</h3>
          <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot bg-error"></div>
          <h3>Broken/Error</h3>
          <p class="text-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot bg-info"></div>
          <h3>Progress/Info</h3>
          <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>`
    }}
  </Story>
</Preview>